<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>投票主页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        body{
            width: 100%;
            height: 100vh;
            background-color: #dc3545;
        }
        .out{
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction:row;
            justify-content: center;
            align-items: center;
        }
        .btn.btn-outline-primary{
            width:150px
        }
    </style>
</head>
<body>
<div class="out">
    <div class="card" style="width: 18rem;">
        <div class="card-body">
            <h5 class="card-title" th:text="${competition.getPlayerId_1().getPlayerName()}">选手1</h5>
            <p class="card-text">点击下方按钮进行投票</p>
            <a th:href="@{/doVote/{comId}(comId=${competition.getComId()},fg='1')}" class="btn btn-outline-primary">投票</a>
        </div>
    </div>
    <img src="/image/vs.png" style="width: 150px" >
    <div class="card" style="width: 18rem;">
        <div class="card-body">
            <h5 class="card-title" th:text="${competition.getPlayerId_2().getPlayerName()}">选手2</h5>
            <p class="card-text">点击下方按钮进行投票</p>
            <a th:href="@{/doVote/{comId}(comId=${competition.getComId()},fg='2')}" class="btn btn-outline-primary">投票</a>
        </div>
    </div>
</div>
</body>
</html>